<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Hello World</title>
  <script src="https://unpkg.com/vue"></script>
  
</head>

<body>
  <div id="root"></div>
  <script>
    /* 
      1. v-if
      2. v-show
      3. v-show控制display:none , v-if直接删除
      4. v-else
      5. v-else-if
    */
    const app = Vue.createApp({
      template: `<div>
        <h3 :class="classString">{{msg}}</h3>
        <h3 :class="classObject">{{msg}}</h3>
        <h3 :class="classArray">{{msg}}</h3>
        <h3 :style="styleString">{{msg}}</h3>
        <h3 :style="styleObject">{{msg}}</h3>
        <child :class="classObject"/>
        <child2 :class="classObject"/>
      </div>`,
      data() {
        return {
          msg: `Hello World`,
          classString: 'red',
          classObject: {
            blue: true,
            fz20: true,
            bgBrown: false
          },
          classArray: ['green', 'bgBrown'],
          styleString: 'color: yellow',
          styleObject: {
            width: '100px',
            background: 'skyblue'
          }
        }
      }
    })
    app.component('child', {
      template: `<p>我是子组件</p>`
    })
    app.component('child2', {
      template: `
        <p>我是子组件2-1</p>
        <p :class="$attrs.class">我是子组件2-2</p>
      `
    })
    const vm = app.mount('#root');
  </script>
</body>

</html>